<template>
  <div class="select_site">
    <div class="topSearch">
      <van-search v-model="searchValue" :placeholder="t('pickupSelect_search_pickup_point')" shape="round" @search="onSearch" />
    </div>
    <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="pickupSiteList && pickupSiteList.length > 0">
        <van-list v-model="loading" :finished="finished" :finished-text="t('pickupSelect_no_more')" @load="onLoad" :immediate-check="false"
          class="siteInfo">
          <van-cell v-for="(item, index) in pickupSiteList" :key="'site' + index" @click.stop="chooseSite(item)"
            class="cell-info">
            <img src="../../assets/uncheckd.png" alt="" class="uncheckd-ring" />
            <i class="iconfont icon-duoxuan-xuanzhong1 theme-customize-font" v-if="siteId === item.place_id"></i>
            <div class="cell-name">{{ item.place_name }}</div>
            <div class="cell-time">
              <div class="cell-left">{{ t('pickupSelect_opening_hours') }}：</div>
              <div class="cell-right">
                <div>{{ item.week }}</div>
                <div>{{ item.time }}</div>
              </div>
            </div>
            <div class="cell-area">
              <div class="cell-left">{{ t('pickupSelect_delivery_point') }}：</div>
              <div class="cell-right">
                {{ item.province + item.city + item.county + item.detail }}
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="no-dates" v-if="!refreshing && !(pickupSiteList && pickupSiteList.length > 0)">
      <img src="../../assets/search-bg.png" alt="" class="search-bg" />
      <div class="bg-titles">{{ t('pickupSelect_no_search_results') }}</div>
    </div>
  </div>
</template>

<script>
import { getDeliveryPlaceList } from "../../fetch-data";
import { PullRefresh, Search, Cell, List } from 'vant';
import locale from "../../../../mixins/locale";

export default {
  name: 'SelectSite',
  components: {
    [PullRefresh.name]: PullRefresh,
    [Search.name]: Search,
    [Cell.name]: Cell,
    [List.name]: List
  },
  mixins: [locale],
  data() {
    return {
      searchValue: "",
      radio: "1",
      pickupSiteList: [],
      siteId: 0,
      page_size: 10,
      page_index: 1,
      refreshing: false,
      loading: false,
      finished: false,
    };
  },
  mounted() {
    this.onRefresh();
  },
  watch: {
    pickupSiteList(val) {
      if (val.length === this.totalCount) { // 获取到所有数据
        this.finished = true; // 没有更多了
        this.loading = true
      }
    }
  },
  methods: {
    hideLoading() {
      this.$toast.clear();
    },
    //单元格单击进行选择和跳转回订单页
    chooseSite(item) {
      this.siteId = item.place_id;
      this.$emit('setPickSiteInfo', item);
      this.$emit('onClick')
    },
    onLoad() {
      let params = {
        app_id: window.APPID,
        keyword: this.searchValue,
        page_size: this.page_size,
        page_index: this.page_index,
      };
      getDeliveryPlaceList(params).then((data) => {
        this.totalCount = data.total
        // 处理时间
        this.getWeekAndTime(data.list);
        if (this.refreshing) {  // 下拉刷新或者第一次进入页面
          this.pickupSiteList = data.list;
          this.refreshing = false;
        } else {
          this.pickupSiteList.push(...data.list);
        }
        if (!this.finished) {
          this.page_index++
          this.loading = false;  // 设置为false才能监听滚动条再次执行onLoad()
        }
      }).catch(() => {
        this.pickupSiteList = [];
      })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.refreshing = true;
      // 重新加载数据，重置页面index
      // 将 loading 设置为 true，表示处于加载状态
      this.page_index = 1;
      this.loading = true;
      this.onLoad();
    },
    onSearch(val) {
      this.searchValue = val;
      this.onRefresh();
    },
    getWeekAndTime(data) {
      data.forEach((item) => {
        // 营业时间---星期几处理
        let operating_cycle = [];
        item.operating_cycle.forEach((el) => {
          if (el.select_state === "1") {
            operating_cycle.push(el.title);
          }
        });
        item.week = operating_cycle.join("、");
        // 营业时间---时间段处理
        item.time = item.business_hours
          .map(
            (item) => `${item.start_business_hours}~${item.end_business_hours}`
          )
          .join("、");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
@import "../../assets/styles/common.scss";
@mixin line-scss {
  color: #999;
  font-size: 0.24rem;
  margin-left: 0.7rem;
  display: flex;

  .cell-left {
    display: inline-block;
    width: 1.3rem;
  }

  .cell-right {
    width: calc(100% - 1.2rem);
  }
}

.select_site {
  .topSearch {
    margin-bottom: .18rem;

    .van-search .van-cell {
      padding: 7px 8px 7px 0;
      background-color: #f5f5f5;
    }

    .van-search__content {
      padding-right: 12px;
    }
  }

  .search-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .bg-titles {
    position: absolute;
    top: 55%;
    left: 40%;
    color: #9e9e9e;
  }

  .siteInfo {
    .cell-info {
      position: relative;

      i {
        position: absolute;
        top: 45%;
        left: 0.1rem;
        line-height: 16px;
      }

      .uncheckd-ring {
        position: absolute;
        top: 45%;
        left: 0.1rem;
      }

      padding: 0.32rem;
      background-color: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      .cell-name {
        font-size: 0.28rem;
        font-weight: 400;
        margin-bottom: 0.16rem;
        margin-left: 0.7rem;
      }

      .cell-time {
        @include line-scss;
        margin-bottom: 0.16rem;
      }

      .cell-area {
        @include line-scss;
      }
    }

    .van-cell__title {
      font-size: 0.28rem;
      margin-left: 0.7rem;

      span {
        display: inline-block;
        width: 3.64rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .van-radio {
      position: absolute;
      top: 40%;
      left: 5%;
    }

    .van-cell {
      display: flex;
      justify-content: space-between;
    }

    .van-cell__label {
      margin-top: -0.1rem;
    }
  }
}
</style>